Fox's Git Mirrors
kk/chat.html 6db23f6e6a02d48889e6a0b74d09588e68ba5ebb (6db23f6e) Text, 32.42 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="chatStyle.css">
<script src="reconnecting-websocket.min.js"></script>
<script src="moment.js"></script>
<link rel="shortcut icon" href="faviocn.png" type="image/png">
<script src="minajax.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>knock-knock</title>
</head>
<body>
<style>
body {
margin-bottom: 100px;
}
</style>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-animate-left" style="display:none; z-index: 100000" id="mySidebar">
<a class="w3-bar-item w3-button w3-large"
href = "test_index.html"><i class="w3-xxxlarge material-icons">home</i>
</a>
<button class="w3-bar-item w3-button w3-large"
onclick="w3_close()">Закрыть ×
</button>
<h3>Чаты:</h3>
<a class="w3-bar-item w3-button "
onclick="all_()">Общий
</a>
</div>
<div style="position: fixed; width: 100%">
<div class="w3-display-container">
<button class="w3-button w3-white w3-xxlarge w3-left w3-margin w3-hover-opacity" style="z-index: 100"
onclick="w3_open()">☰
</button>
<button onclick='address_change()' id="address_st"
class="w3-button w3-round-large w3-hover-opacity w3-margin w3-xlarge w3-black w3-left"
style="width: 30%; float: left">Кому: всем
</button>
<div class="w3-dropdown-hover w3-xlarge" style="width: 50%">
<button class="w3-button w3-black w3-button w3-round-large w3-hover-opacity w3-margin w3-xlarge w3-black"
style="width: 80%">Стикеры
</button>
<div class="w3-dropdown-content w3-bar-block w3-border w3-right" id="textView"
style="width: 100%; overflow: auto; max-height: 500px">
</div>
</div>
<br>
<button class="w3-btn w3-hover-opacity w3-black w3-margin w3-padding w3-right w3-xxxlarge" id="arrow"
style="opacity: 1" onclick="f1()">⟱
</button>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="w3-bottom w3-border w3-white" style="height: 80px">
<input class="w3-input w3-xxlarge w3-left" placeholder="введите сообщение" style="width: 80%"
onkeydown="KeyDown1(event)" id="InputMSG"/>
<button onclick="send2('text')" class="w3-button w3-round-large w3-hover-opacity w3-margin-left "
style="width: 10%; background-color:transparent; height: 90%"><img src="send-button.png"></button>
<br>
</div>
<script>
var current_id = "all";
function all_() {
w3_close();
current_id = "all";
addressGlobal = "";
document.getElementById("address_st").innerHTML = "Кому: всем";
while (document.getElementsByClassName('msg').length > 0) {
document.getElementsByClassName('msg')[0].parentNode.removeChild(document.getElementsByClassName('msg')[0])
}
setTimeout(
function () {
all = false;
inbox.send(JSON.stringify({
"lim": 30,
"msg": "false",
"key": localStorage.getItem('uuid'),
"start": 0,
"token": localStorage.getItem("token")
}));
cur_count_msg = 30
}, 5
);
}
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
var users_map = {};
function f1() {
document.documentElement.scrollTop = document.body.scrollHeight
}
function ping() {
// inbox.send('{"system": "true", "name": "ping", "key": "key", "event": "ping"}');
msg = {
token: localStorage.getItem("token"),
name: "name",
uuid: localStorage.getItem("uuid"),
system: "true",
event: "ping"
};
outbox.send(JSON.stringify(msg));
}
setInterval(ping, 10000);
function sticker(src_var) {
if (typeof localStorage.getItem("uuid") == "object") {
localStorage.setItem("uuid", uuid())
}
var uuidNow = localStorage.getItem("uuid");
var icon = localStorage.getItem("icon");
var time = moment().format('MMMM Do YYYY, h:mm:ss a');
if (addressGlobal != "") {
minAjax({
url: "https://warm-bayou-37022.herokuapp.com/add_friend",
type: "POST",
data:{
id1: localStorage.uuid,
id2: addressGlobal
},
success: function (ans) {
if (current_id == "all"){
var bar;
var child;
bar = document.getElementById("mySidebar");
child = document.createElement("a");
child.className = "w3-bar-item w3-button";
child.id = addressGlobal;
child.onclick = function (ev) {
var id = this.id;
current_id = id;
document.getElementById("address_st").innerHTML = "Кому: " + this.innerHTML;
while (document.getElementsByClassName('msg').length > 0) {
document.getElementsByClassName('msg')[0].parentNode.removeChild(document.getElementsByClassName('msg')[0])
}
setTimeout(
function () {
inbox.send(JSON.stringify({
"lim": cur_count_msg_l,
"msg": "false",
"key": localStorage.getItem('uuid'),
"start": 0,
"token": localStorage.getItem("token"),
"user": current_id
}));
}, 5
);
};
console.log(child);
child.innerHTML = addressGlobalName;
bar.appendChild(child);
var id = addressGlobal;
current_id = id;
while (document.getElementsByClassName('msg').length > 0) {
document.getElementsByClassName('msg')[0].parentNode.removeChild(document.getElementsByClassName('msg')[0])
}
setTimeout(
function () {
inbox.send(JSON.stringify({
"lim": cur_count_msg_l,
"msg": "false",
"key": localStorage.getItem('uuid'),
"start": 0,
"token": localStorage.getItem("token"),
"user": current_id
}));
}, 5
);
}
}
});
var msg = {
system: "false",
uuid: uuidNow,
text: src_var,
name: localStorage.getItem("name"),
icon: icon,
time: time,
address: addressGlobal,
nameAddress: addressGlobalName,
type: "img",
token: localStorage.getItem("token")
};
if (current_id !== "all") {
NewMsg(msg.text, "для " + msg.nameAddress, true, msg.icon, msg.time, true, msg.uuid, msg.name, "img");
}
}
else {
var msg = {
system: "false",
uuid: uuidNow,
text: src_var,
name: localStorage.getItem("name"),
icon: icon,
time: time,
type: "img",
token: localStorage.getItem("token")
};
}
outbox.send(JSON.stringify(msg));
document.getElementById("InputMSG").value = ""
}
function address_change() {
if (current_id !== "all"){
all_()
}
addressGlobal = "";
document.getElementById("address_st").innerHTML = "Кому: всем"
}
var startMsgs = 0;
var addressGlobal = "";
var addressGlobalName;
var users = {};
var inbox = new ReconnectingWebSocket("wss://" + "warm-bayou-37022.herokuapp.com" + "/receive");
inbox.onopen = function () {
var id = localStorage.getItem("uuid");
var msg = {key: id, msg: "true", name: localStorage.getItem("name"), token: localStorage.getItem("token")};
inbox.send(JSON.stringify(msg));
};
inbox.onclose = function () {
};
var outbox = new ReconnectingWebSocket("wss://" + "warm-bayou-37022.herokuapp.com" + "/submit");
// outbox.onopen = function(){
// var id = localStorage.getItem("uuid");
// var msg = {key: id, msg: "true", name: localStorage.getItem("name"), token: localStorage.getItem("token")};
// outbox.send(JSON.stringify(msg))
// };
inbox.onclose = function () {
localStorage.setItem("error", true);
location.href = "test_index.html";
};
function KeyDown1(event) {
if (event.keyCode == 13 && document.getElementById("InputMSG").value != "") {
send2()
}
}
function send2() {
if (document.getElementById("InputMSG").value != "") {
document.getElementsByClassName("msg")[document.getElementsByClassName("msg").length - 1].scrollIntoView(true);
var MsgText = document.getElementById("InputMSG").value;
if (typeof localStorage.getItem("uuid") == "object") {
localStorage.setItem("uuid", uuid())
}
var uuidNow = localStorage.getItem("uuid");
var icon = localStorage.getItem("icon");
var time = moment().format('MMMM Do YYYY, h:mm:ss a');
if (addressGlobal != "") {
minAjax({
url: "https://warm-bayou-37022.herokuapp.com/add_friend",
type: "POST",
data:{
id1: localStorage.uuid,
id2: addressGlobal
},
success: function (ans) {
if (current_id == "all"){
var bar;
var child;
bar = document.getElementById("mySidebar");
child = document.createElement("a");
child.className = "w3-bar-item w3-button";
child.id = addressGlobal;
child.onclick = function (ev) {
var id = this.id;
current_id = id;
document.getElementById("address_st").innerHTML = "Кому: " + this.innerHTML;
while (document.getElementsByClassName('msg').length > 0) {
document.getElementsByClassName('msg')[0].parentNode.removeChild(document.getElementsByClassName('msg')[0])
}
setTimeout(
function () {
inbox.send(JSON.stringify({
"lim": cur_count_msg_l,
"msg": "false",
"key": localStorage.getItem('uuid'),
"start": 0,
"token": localStorage.getItem("token"),
"user": current_id
}));
}, 5
);
};
console.log(child);
child.innerHTML = addressGlobalName;
bar.appendChild(child);
var id = addressGlobal;
current_id = id;
while (document.getElementsByClassName('msg').length > 0) {
document.getElementsByClassName('msg')[0].parentNode.removeChild(document.getElementsByClassName('msg')[0])
}
setTimeout(
function () {
inbox.send(JSON.stringify({
"lim": cur_count_msg_l,
"msg": "false",
"key": localStorage.getItem('uuid'),
"start": 0,
"token": localStorage.getItem("token"),
"user": current_id
}));
}, 5
);
}
}
});
var msg = {
system: "false",
uuid: uuidNow,
text: MsgText,
name: localStorage.getItem("name"),
icon: icon,
time: time,
address: addressGlobal,
nameAddress: addressGlobalName,
type: "text",
token: localStorage.getItem("token")
};
NewMsg(msg.text, "для " + msg.nameAddress, true, msg.icon, msg.time, true, msg.uuid, msg.name, "text");
}
else {
var msg = {
system: "false",
uuid: uuidNow,
text: MsgText,
name: localStorage.getItem("name"),
icon: icon,
time: time,
type: "text",
token: localStorage.getItem("token")
};
}
outbox.send(JSON.stringify(msg));
document.getElementById("InputMSG").value = ""
}
}
function check(uuid) {
return uuid == localStorage.getItem("uuid");
}
outbox.onmessage = function (data) {
console.log(data);
if (data.data == "no token found" || data.data == "wrong token") {
localStorage.error = "true";
location.href = "test_index.html"
}
if (data.data == "token fired") {
minAjax({
url: "https://warm-bayou-37022.herokuapp.com/check",
type: "GET",
data: {
cookie: localStorage.getItem("cookie"),
id: localStorage.getItem("uuid")
},
success: function (ans) {
if (ans != 'false') {
if (ans.length === 4) {
localStorage.setItem("token", ans[3][0]);
}
if (ans.length === 5) {
localStorage.setItem("token", ans[4][0]);
}
}
else {
alert("время сессии истекло, авторизуйтесь снова");
}
}
});
}
};
inbox.onmessage = function (data) {
var time = moment().format('MMMM Do YYYY, h:mm:ss a');
var msg = JSON.parse(data.data);
if (msg.system == "true") {
if (msg.event == "reg") {
if (msg.key != localStorage.getItem("uuid")) {
console.log(msg);
if (msg.admin == "true") {
users[msg.key] = msg.name;
systemMsg("администратор " + msg.name, time, "подключился")
}
else {
users[msg.key] = msg.name;
systemMsg("пользователь " + msg.name, time, "подключился")
}
}
}
if (msg.event == "close") {
if (msg.key != localStorage.getItem("uuid")) {
if (msg.admin == "true") {
delete (users[msg.key]);
systemMsg("администратор " + msg.name, time, "отключился")
}
else {
delete (users[msg.key]);
systemMsg("пользователь " + msg.name, time, "отключился")
}
}
}
if (msg.end === "true") {
all = true;
}
if (msg.event === "map") {
users_map[msg.id] = msg.name
}
}
else {
Msg(msg)
}
startMsgs++;
};
function Msg(msg) {
if (typeof msg.address == "undefined") {
if (check(msg.uuid)) {
NewMsg(msg.text, "вы", true, msg.icon, msg.time, false, msg.uuid, msg.name, msg.type);
}
else {
var a = "";
if (msg.admin == "true") {
a = "[админ]"
}
NewMsg(msg.text, msg.name + a, false, msg.icon, msg.time, false, msg.uuid, msg.name, msg.type);
soundClick();
}
}
else {
if (check(msg.uuid)) {
if(current_id === msg.address) {
NewMsg(msg.text, "для " + msg.nameAddress, true, msg.icon, msg.time, true, msg.uuid, msg.name, msg.type);
}
}
else {
soundClick();
var a = "";
if (msg.admin == "true") {
a = "[админ]"
}
if(current_id === msg.uuid) {
NewMsg(msg.text, "для вас от " + msg.name + a, false, msg.icon, msg.time, true, msg.uuid, msg.name, msg.type);
}
else {
var b = false;
var arr = document.getElementById("mySidebar").children;
for (var i = 1; i < arr.length; i++) {
if(msg.uuid === arr[i].id){
b = true;
}
}
if (b === false){
var bar = document.getElementById("mySidebar");
var child;
child = document.createElement("a");
child.className = "w3-bar-item w3-button child";
child.id = msg.uuid;
child.onclick = function (ev) {
var id = this.id;
current_id = id;
addressGlobal = id;
addressGlobalName = this.innerHTML;
document.getElementById("address_st").innerHTML = "Кому: " + this.innerHTML;
while (document.getElementsByClassName('msg').length > 0) {
document.getElementsByClassName('msg')[0].parentNode.removeChild(document.getElementsByClassName('msg')[0])
}
setTimeout(
function () {
inbox.send(JSON.stringify({
"lim": cur_count_msg_l,
"msg": "false",
"key": localStorage.getItem('uuid'),
"start": 0,
"token": localStorage.getItem("token"),
"user": current_id
}));
}, 5
);
document.getElementById("mySidebar").style.display = "none";
};
console.log(child);
child.innerHTML = msg.name;
bar.appendChild(child);
}
}
}
}
}
function uuid() {
var now = new Date();
return (now.getMilliseconds() + now.getHours() + now.getMinutes()) * Math.random(-1, 100);
}
var f;
window.onfocus = function () {
f = false;
};
window.onblur = function () {
f = true;
};
function soundClick() {
if (f === true) {
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = 'click.mp3'; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
}
}
function systemMsg(name, time_obj, msg) {
var newDiv = document.createElement("h3");
var parent = document.createElement("div");
parent.className = "w3-container";
newDiv.className = "system w3-blue";
var newContent = document.createTextNode(name + " " + msg);
var time = document.createElement("SPAN");
time.innerHTML = time_obj;
time.className = "time";
var br = document.createElement("br");
var br2 = document.createElement("br");
var br3 = document.createElement("br");
var br4 = document.createElement("br");
var br5 = document.createElement("br");
var br6 = document.createElement("br");
var br7 = document.createElement("br");
var br8 = document.createElement("br");
var br9 = document.createElement("br");
br.className = "del";
br2.className = "del";
br3.className = "del";
br4.className = "del";
br5.className = "del";
br6.className = "del";
br7.className = "del";
br8.className = "del";
br9.className = "del";
newDiv.appendChild(time);
newDiv.appendChild(br6);
newDiv.appendChild(newContent);
parent.appendChild(newDiv);
document.body.appendChild(parent);
parent.scrollIntoView(true);
del(newDiv, br, br2, br3, br4, br5, br6, br7, br8, br9)
}
// function error(msg) {
// // <div id="id01" class="w3-margin w3-panel w3-red w3-round w3-animate-top" style="display: block; width: 100%;">
// // <h2 style="font-size: 20px">Вы не ввели имя!</h2>
// // <span onclick="document.getElementById('id01').style.display='none'"
// // class="w3-button w3-left w3-margin w3-black">Хорошо</span>
// // </div>
// var parent = document.createElement("div");
// parent.className = "w3-margin w3-panel w3-red w3-round w3-animate-top alert";
// var message = document.createElement("p");
// message.innerHTML = msg
//
//
// }
var cur_count_msg = 30;
var cur_count_msg_l = 5000;
var all = true;
window.onscroll = function () {
var scrolled = document.documentElement.scrollTop;
if (current_id === "all") {
if (document.documentElement.scrollTop === document.documentElement.scrollHeight - document.documentElement.clientHeight) {
document.getElementById("arrow").style.opacity = '0'
}
if (document.documentElement.scrollTop !== document.documentElement.scrollHeight - document.documentElement.clientHeight) {
document.getElementById("arrow").style.opacity = '1'
}
if (scrolled === 0) {
while (document.getElementsByClassName('msg').length > 0) {
document.getElementsByClassName('msg')[0].parentNode.removeChild(document.getElementsByClassName('msg')[0])
}
setTimeout(
function () {
all = false;
inbox.send(JSON.stringify({
"lim": cur_count_msg + 30,
"msg": "false",
"key": localStorage.getItem('uuid'),
"start": 0,
"token": localStorage.getItem("token")
}));
cur_count_msg += 30;
}, 5
);
}
}
};
function del(obj, br, br2, br3, br4, br5, br6, br7, br8, br9) {
var opacity = 1;
for (var i = 5000; i < 7000; i += 10) {
setTimeout(function () {
obj.style = 'opacity: ' + opacity.toString();
opacity -= 0.005
}, i)
}
setTimeout(function () {
var parent = obj.parentElement;
parent.removeChild(obj);
parent.removeChild(br);
parent.removeChild(br2);
parent.removeChild(br3);
parent.removeChild(br4);
parent.removeChild(br5);
parent.removeChild(br7);
parent.removeChild(br8);
parent.removeChild(br9);
}, 7000)
}
function NewMsg(msg, name, mine, icon, time_obj, address2, uuid, nameAddress, type) {
var parentDiv = document.createElement("DIV");
var newDiv = document.createElement("DIV");
parentDiv.className = "msg w3-container";
var newContent;
if (type == "img") {
newContent = document.createElement("IMG");
newContent.src = msg;
newContent.style.maxWdth = "300px";
newContent.style.maxHeight = "300px"
}
else {
newContent = document.createTextNode(name + ": " + msg);
}
var time = document.createElement("DIV");
time.innerHTML = time_obj;
time.className = "time";
newDiv.onclick = function () {
addressGlobal = uuid;
addressGlobalName = nameAddress;
document.getElementById("address_st").innerHTML = "Кому: " + nameAddress
};
if (!mine) {
newDiv.className = "messageLeft w3-hover-opacity w3-left";
}
if (mine) {
newDiv.className = "messageRight w3-hover-opacity w3-right";
}
if (!mine && address2) {
newDiv.className = "messageLeft_red w3-hover-opacity w3-left";
}
if (mine && address2) {
newDiv.className = "messageRight_red w3-hover-opacity w3-right";
}
if (icon == 1) {
var img = document.createElement("IMG");
img.src = "anonymous1.png";
}
else if (icon == 2) {
var img = document.createElement("IMG");
img.src = "anonymous2.png";
}
else if (icon == 3) {
var img = document.createElement("IMG");
img.src = "anonimus3.png";
}
newDiv.appendChild(time);
newDiv.appendChild(img);
if (type == "img") {
newDiv.appendChild(document.createTextNode(name + ":"));
}
newDiv.appendChild(newContent);
parentDiv.appendChild(newDiv);
document.body.appendChild(parentDiv);
//
if (all === true) {
newDiv.scrollIntoView(true);
}
else {
document.getElementsByClassName("msg")[30].scrollIntoView(true)
}
}
window.onload = function () {
cur_count_msg = 30;
cur_count_msg_l = 5000;
all = false;
var stickers = JSON.parse(localStorage.getItem("stickers"));
setTimeout(function () {
minAjax({
url: "https://warm-bayou-37022.herokuapp.com/friends",
type: "GET",
data: {
id: localStorage.getItem("uuid")
},
success: function (ans) {
var bar;
var child;
if ((ans != "error") && (ans != "false")) {
bar = document.getElementById("mySidebar");
console.log(bar);
var arr = JSON.parse(ans);
console.log(arr);
for (var i = 0; i < arr.length; i++) {
//<a href="#" class="w3-bar-item w3-button">Link 1</a>
//<i class="material-icons">reply</i>
child = document.createElement("a");
child.className = "w3-bar-item w3-button child";
child.id = arr[i].id;
child.onclick = function (ev) {
var id = this.id;
current_id = id;
addressGlobal = id;
addressGlobalName = this.innerHTML;
document.getElementById("address_st").innerHTML = "Кому: " + this.innerHTML;
while (document.getElementsByClassName('msg').length > 0) {
document.getElementsByClassName('msg')[0].parentNode.removeChild(document.getElementsByClassName('msg')[0])
}
setTimeout(
function () {
inbox.send(JSON.stringify({
"lim": cur_count_msg_l,
"msg": "false",
"key": localStorage.getItem('uuid'),
"start": 0,
"token": localStorage.getItem("token"),
"user": current_id
}));
}, 5
);
document.getElementById("mySidebar").style.display = "none";
};
console.log(child);
child.innerHTML = arr[i].name;
bar.appendChild(child);
}
}
}
});
}, 100);
for (var i = 0; i < stickers.length; i++) {
var parent = document.getElementById("textView");
var child = document.createElement("div");
child.className = "w3-bar-item w3-button";
child.onclick = function (_i) {
return function () {
sticker(stickers[_i])
}
}(i);
var img = document.createElement("img");
img.src = stickers[i];
img.style.width = "10%";
child.appendChild(img);
parent.appendChild(child);
}
if (localStorage.getItem("name") == "" || typeof localStorage.getItem("icon") == "object" || typeof localStorage.getItem("name") == "object") {
alert("введите имя!");
location.href = "index.html";
}
}
</script>
</body>
</html>
Served by rngit 1.5.2 - Generated in 0.03s